<template>
	<view class="payment" v-if="orderInfo.movieName" :style="{'padding-bottom':paddingBottom + 10 + 'px'}">
		<!-- 头部 start -->
		<title :center="false" title="确认订单" iconSize="38" bgcolor="#fff" color="#666"
			icon="/static/img/other/zuojiantou2.png" :bold="false" :iconSize="45" @to-click="toBack"></title>
		<view class="confirmtop" :style="{'margin-top': height * 1.5 + 100 + 'rpx'}">
			<view class="" style="flex:1;">
				<view class="sendfont">
					<text class="sedfont">{{orderInfo.movieName}}</text>
					<view class="iconfont icon-dianyingpiao1"></view>
					<text class="seatfont">{{orderInfo.count}}张</text>
				</view>
				<view class="sendfont2">
					<text>{{orderInfo.show_time || '' | getWeekByDay}}</text>
					<text>{{orderInfo.show_time || '' | formateDate('MM-DD')}}</text>
					<text>
						{{orderInfo.show_time || '' | formateDate('HH:mm')}}~{{orderInfo.show_time || '' | endTime(orderInfo.timeLength)}}
					</text>
					<text v-if="orderInfo.tp">{{orderInfo.tp}}</text>
				</view>
				<view class="sendfont2">{{orderInfo.cname}}|{{orderInfo.cinemaName}}</view>
				<view class="sendfont2">{{orderInfo.hallName}}({{orderInfo.seat | shufilter(',', ' ', true)}})
				</view>
				<view
					style="display: flex;justify-content: flex-start;align-items: center;margin-top: 24rpx;border-top: 2rpx solid rgba(226, 226, 226, 1);padding-top: 22rpx;">
					<view class="">
						<text class="iconfont iconx"></text>
						<text style="margin-left: 11rpx;">不可退票</text>
					</view>
					<view class="" style="margin-left: 50rpx;">
						<text class="iconfont iconx"></text>
						<text style="margin-left: 11rpx;">不可改签</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 头部 end -->

		<!-- 电影票信息 start -->
		<view class="movieinfo">
			<view class="youhui">
				<view class="quan">手机号</view>
				<!-- <view class="zhangyong">{{orderInfo.userinfo.tel | mobileHide}}</view> -->
				<!-- @blur='inpBlur' @focus='inpFocus' -->
				<input class="input" @input='inputEve' @blur='inpBlur' type="number" placeholder='请输入手机号' maxlength="11"
					v-model="phone" />
			</view>

			<view class="youhui">
				<view class="">
					<text class="quan">原价</text>
					<text class="zhangyong">{{(orderInfo.original_price * orderInfo.count) | toFixed(2)}}
					</text>
					<text class="quan margin">优惠</text>
					<text class="zhangyong youcolor">{{discount | toFixed(2)}}</text>
				</view>

				<view class="">
					<text class="quan">实付</text>:
					<text class="zhangyong shicolor">￥{{(orderInfo.price * orderInfo.count) | toFixed(2)}}
					</text>
				</view>
			</view>
			<view class="youhui beixuan">
				<view class="quan">备选座位</view>
				<view @click.stop="changeChoose">
					<u-switch v-model="isChange" size="38" active-color="#F1255D" :disabled="true"></u-switch>
				</view>
			</view>
			<view class="jieshou">
				当所选位置售罄时，系统自动调至最佳观影位置。
			</view>
			<view class="youhui mode">
				<view class="quan">购票方式</view>
			</view>
			<view class="">
				<view class="buyTicketMode">
					<view class="buyTicketMode-tehui" @click="clickRadio(0)">
						<view class="buyTicketMode-left">
							<view class="">
								<text class="iconfont iconrementuijian" style="color: #EF3B5D;font-size: 24rpx;"></text>
								<text class="buyTicket-title" style="margin-left: 10rpx;">特惠购票</text>
							</view>
							<view class="buyTicket-info">
								优惠较大，15-60分钟出票，出票失败全额退款
							</view>
						</view>
						<view style="display: flex;justify-content: flex-end;align-items: center;">
							<view class="buyTicketMode-right">
								<text
									class="buyTicket-title">￥{{orderInfo.price * orderInfo.count | toFixed(2) }}</text>
								<text style="color:rgba(239, 59, 93, 1);">立省￥{{discount | toFixed(2)}}</text>
							</view>
							<view class="buyTicketMode-right">
								<radio style="transform:scale(0.6);" @click="clickRadio(0)" color='#EF3B5D'
									:checked="select == 0" :disabled="isBol ? false : true" />
								<view style="width: 70rpx;height: 32rpx;"></view>
							</view>
						</view>
					</view>

					<view class="buyTicketMode-jishu" @click="clickRadio(1)" v-if="!isBol">
						<view class="buyTicketMode-left">
							<view class="">
								<text class="iconfont iconjisutuikuan" style="color: #417DFF;font-size: 30rpx;"></text>
								<text class="buyTicket-title" style="margin-left: 4rpx;">极速购票</text>
							</view>
							<view class="buyTicket-info">
								实时锁座，15分钟内出票，出票失败全额退款
							</view>
						</view>
						<view style="display: flex;justify-content: flex-end;align-items: center;">
							<view class="buyTicketMode-right">
								<text
									class="buyTicket-title">￥{{(orderInfo.settle_price * orderInfo.count).toFixed(2)}}</text>
								<view style="width: 84rpx;height: 32rpx;"></view>
							</view>
							<view class="buyTicketMode-right">
								<radio @click="clickRadio(1)" style="transform:scale(0.6)" color='#EF3B5D'
									:checked="select == 1" />
								<view style="width: 70rpx;height: 32rpx;"></view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<!-- 电影票信息 end -->

		<!-- 购票须知 start -->
		<view class="buyticket">
			<view class="title flex">
				<text>购票须知</text>
				<view class="choiceBox">
					<u-checkbox class="" v-model="refundModal.checked" active-color="#f1255d" shape="circle"
						@change="chooseAgree"></u-checkbox>
					<view v-if="refundModal.checked == false">未读</view>
					<view v-else>
						已读
					</view>
				</view>
			</view>

			<view class="popup-desc-box">
				<view class="desc-title">1.根据中国电影发行放映协会要求，观影前需实名登记观众信息，未戴口罩和体温37.3度以上者不得进入。</view>
				<view class="desc-title" style="color: red;">2.请确认场次和时间无误,购票成功后不可退票、不可改签。</view>
				<view class="desc-title">3.付款成功后，预计在10-60分钟内出票，出票失败全额退款。</view>
				<view class="desc-title">4.取票码查看方式：点击“我的-电影票”即可查看取票码，凭二维码或取票码至影城取票机即可取票。</view>
				<view class="desc-title" style="color: red;">5.如遇影城设备故障等不可抗力导致影片无法正常播放，会退票退款</view>
			</view>
		</view>
		<!-- 购票须知 end -->

		<!-- 底部提交订单 start -->
		<view class="order_botm">
			<view class="buke" @click="priceClick" v-if="!option.pay">
				<view class="">
					<view class="fen">
						<text v-if="select === 0">￥{{orderInfo.price * orderInfo.count | toFixed(2) }}元</text>
						<text v-if="select === 1">￥{{(orderInfo.settle_price * orderInfo.count).toFixed(2)}}</text>
						<view v-if="priceModal.show == false" class="iconfont iconlong-arrow-top  arr"></view>
						<view v-else class="iconfont iconarrowdown arr"></view>
					</view>
					<view>电影票不支持退票、改签</view>
				</view>
			</view>

			<!-- 非插件 -->
			<view class="tijiaoorder" v-if="!option.pay">
				<button class="tijiaoorder" @click="getPayParams">确认付款</button>
			</view>
			<view class="tijiaoorder two-btn" v-else>
				<button class="tijiaoorder" @click="setCancel">取消订单</button>
				<button class="tijiaoorder" @click="getPayParams">确认付款</button>
			</view>

		</view>
		<!-- 底部提交订单 end -->

		<!-- 价格明细弹出 start -->
		<u-popup v-model="priceModal.show" closeable mode="bottom">
			<view class="popup-model-box">
				<view class="popup-title">价格明细</view>
				<view class="popup-content">
					<view class="popup-desc-box">
						<view class="desc-content" style="font-size: 28rpx;">电影票 {{orderInfo.count}}张</view>
						<view class="desc-content" style="font-size: 28rpx;">
							<view>原价</view>
							<view class="desc-title">
								{{(orderInfo.original_price * orderInfo.count) | toFixed(2)}}元
							</view>
						</view>
						<view class="desc-content" style="font-size: 28rpx;">
							<text>优惠活动</text>
							<view class="desc-title" v-if="select === 0">-{{discount | toFixed(2)}}元</view>
							<view class="desc-title" v-else>0元</view>
						</view>
					</view>
					<view class="popup-bottom-switch" style="opacity: 0;">
						<view>我已阅读并同意</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 价格明细弹出 end -->

		<!-- 是否调座弹框 start -->
		<seat-popup v-model="seatShow" @seat-cancel='seatClick'></seat-popup>
		<!-- 是否调座弹框 end -->

		<!-- 购票须知弹框 start -->
		<notice-popup v-model="noticeShow" @confirm="refundModal.checked = true"></notice-popup>
		<!-- 购票须知弹框 end -->
	</view>
</template>

<script>
	import title from '@/pages/components/title.vue'
	import noticePopup from '../components/NoticePopup.vue'
	import SeatPopup from '../components/SeatPopup.vue'
	export default {
		data() {
			return {
				noticeShow: false,
				seatShow: false,
				paddingBottom: 0,
				height: 0,
				option: {},
				// 备选座位开关
				isChange: true,
				// 订单信息
				orderInfo: {
					order: {},
					userinfo: {}
				},
				// 不退退票弹出
				refundModal: {
					show: false,
					checked: false
				},
				// 价格明细弹出
				priceModal: {
					show: false,
				},
				// 挖票网
				temId: [
					// "g0-D_0obueCMMe_xA2E7YYN6CQiwnGI0RXW_7eBZa7A", //电影开场
					// "_pgJ_brDntLe3WlRgBVisiZu5wPWrsCTKHgkVlQMAtY", //订单退款通知
					"Pigp3ko0D1GFzgbcuJ4wlCsGBW4t6Xznq4HaeqJdhrY", //电影出票成功通知
					"tgGiQ9nkk81xdaG7re_pdv62CEtNnv4XYsu2fnQQZV4", //电影出票失败通知
					"eq_wVhhurogyaxk98yIDYI_0xcJJBzxNdzbTLtqUFeo" //订单状态通知
				],
				phone: "",
				isBol: true,
				select: 0,
			}
		},
		computed: {
			discount() {
				if (this.orderInfo.original_price) {
					return (this.orderInfo.original_price * this.orderInfo.count) - (this.orderInfo
						.price * this.orderInfo.count)
				}
				return 0
			},
		},
		components: {
			title,
			noticePopup,
			SeatPopup
		},
		watch: {
			"$store.state.uInfo.tel"(val) {
				this.phone = val || ''
			},
			orderInfo: {
				handler(newValue, oldValue) {
					this.$nextTick(function() {
						this.select = this.isBol ? 0 : 1
					})
				},
				immediate: true
			}
		},
		onLoad(option) {
			this.orderInfo = JSON.parse(decodeURIComponent(option.order))
			this.isChange = this.orderInfo.ischange == 1 ? true : false
			this.phone = this.$store.state.uInfo.tel || ''
			this.isOut()
		},
		onShow() {
			this.$nextTick(() => {
				this.height = this.$common.setWidthHeight()
				const query = uni.createSelectorQuery().in(this);
				query.select('.order_botm').boundingClientRect(data => {
					this.paddingBottom = data.height
				}).exec();
			})
			uni.showLoading({
				title: '加载中'
			})
			setTimeout(() => {
				uni.hideLoading()
			}, 1000)
		},
		onUnload() {
			if (this.option.back) {
				this.$common.toBack(1)
			}
		},
		methods: {
			clickRadio(i) {
				if (i === 1) {
					this.select = i
				} else {
					if (!this.isBol) {
						uni.showToast({
							title: "特惠购票需提前60分钟",
							icon: 'none'
						})
						return false
					} else {
						this.select = i
					}
				}
			},
			isOut() {
				// let t1 = this.$moment(this.orderInfo.order.show_time)
				let t1 = this.$moment(this.orderInfo.show_time)
				let t2 = this.$moment(new Date());
				//计算时间差并转换成标准时间单位
				let dura = t1.format('x') - t2.format('x');
				let tempTime = this.$moment.duration(dura);
				this.isBol = tempTime.asMinutes() > 60 ? true : false
			},
			// 手机号输入框的focus
			inpFocus(e) {
				this.phone = ""
			},
			//手机号输入框的输入
			inputEve(e) {},
			//手机输入框失去焦点
			inpBlur(e) {
				// console.log(e)
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: "none"
					})
				} else {
					// 必须是1开头，第二位数字可以是0-9任意一个，总长为11
					// let reg = /^1([0-9])\d{9}$/;
					// 必须是1开头，第二位数字可以是3|5|6|7|8|9任意一个，总长为11
					let reg = /^1([3|5|6|7|8|9])\d{9}$/;
					// console.log(/^1(3|4|5|7|8)\d{9}$/.test(this.phone))
					if (!reg.test(this.phone)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: "none"
						})
					}
					return
				}
			},
			// 返回
			toBack() {
				this.$common.toBack(1)
			},
			// 不可退票弹框
			refundClick() {
				this.priceModal.show = false
				this.refundModal.show = !this.refundModal.show
			},
			// 价格明细弹框
			priceClick() {
				this.refundModal.show = false
				this.priceModal.show = !this.priceModal.show
			},
			seatClick() {
				let _this = this
				_this.isChange = !_this.isChange
				_this.orderInfo.ischange = _this.isChange ? 1 : 0
				_this.seatShow = false
			},
			// switch改变
			changeChoose() {
				let _this = this
				if (this.isChange) {
					this.seatShow = true
					// uni.showModal({
					// 	title: "是否接受备选座位？",
					// 	content: "接受备选座位，当您的所选位置锁座失败时系统会为您购买符合您选座偏好的最佳观影位置",
					// 	showCancel: !0,
					// 	cancelColor: "#999",
					// 	confirmColor: "#F1255D",
					// 	cancelText: "暂不需要",
					// 	confirmText: "接受备选",
					// 	success: function(res) {
					// 		if (res.cancel) {
					// 			_this.isChange = !_this.isChange
					// 			_this.orderInfo.ischange = _this.isChange ? 1 : 0
					// 		}
					// 	},
					// })
				} else {
					_this.isChange = !_this.isChange
					_this.orderInfo.ischange = _this.isChange ? 1 : 0
				}
			},

			// 座位设置备选
			setIsChange() {
				uni.showLoading({
					title: '设置中'
				})
				this.$api.setIsChange({
					val: !this.isChange,
					oid: this.option.oid
				}).then(res => {
					this.isChange = !this.isChange
					uni.hideLoading()
				}).catch(() => {})
			},
			// 设置取消订单
			async setCancel() {
				if (!await this.getIsPayByOid()) {
					this.$common.toBack(1)
				} else {
					let _this = this
					uni.showModal({
						title: "温馨提醒",
						content: "订单取消后,已选座位将不会保留",
						cancelColor: "#999",
						confirmColor: "#F1255D",
						cancelText: "确认取消",
						confirmText: "继续支付",
						success: function(res) {
							if (res.confirm) {
								// console.log('用户点击确定');
							} else if (res.cancel) {
								_this.releaseOrder(true)
							}
						},
					})
				}
			},
			// 获取订单是否支付
			async getIsPayByOid() {
				let res = await this.$api.getIsPayByOid({
					id: this.orderInfo.order.id
				})
				if (res.data.data.is_pay == 0) {
					return true
				} else {
					return false
				}
			},
			// 取消订单
			releaseOrder(status) {
				if (status) {
					uni.showLoading({
						title: "取消中"
					})
				}
				this.$api.releaseOrder({
					oid: this.option.oid
				}).then(res => {
					uni.hideLoading()
					this.$common.toBack(1)
				}).catch(err => {
					console.log(err)
					this.$common.toBack(1)
				})
			},
			// 唤起支付
			getPayParams() {
				// if (!this.refundModal.checked) {
				// 	uni.showModal({
				// 		content: "请仔细阅读购票须知,并勾选【已读】表示同意该协议",
				// 		confirmText: "确定",
				// 		confirmColor: "#000000",
				// 		showCancel: false,
				// 	})
				// 	this.refundModal.show = true
				// 	return false
				// }
				if (!this.refundModal.checked) {
					this.noticeShow = true
					return false
				}

				let _this = this
				uni.requestSubscribeMessage({
					tmplIds: this.temId,
					complete: async function() {
						let res = await _this.addNewOrder()
						// console.log('res', res)
						if (res.status) {
							let id = res.id
							_this.$api.getPayParams({
								id: id
							}).then(res => {
								let data = res.data.data
								data.provider = 'wxpay'
								_this.$common.requestPayment(data, (result) => {
									uni.navigateTo({
										url: `/subpages/orderDetail/order-detail?no=${_this.orderInfo.order.orderno}`
									})
								}, (error) => {
									uni.navigateTo({
										url: `/subpages/seat/submit?oid=${id}&pay=1`
									})
								})
							}).catch((err) => {
								console.log(err)
							})
							uni.hideLoading()
						}
					},
					fail: function(e) {
						console.log(e)
					}
				})
			},
			addNewOrder() {
				return new Promise((resolve, reject) => {
					uni.showLoading({
						title: '加载中'
					})
					let data = Object.assign({}, this.orderInfo)
					data['is_express'] = this.select
					if (this.select === 1) {
						data['price'] = data['settle_price']
					}
					data['tel'] = this.phone
					this.$api.addNewOrder({
						listInfo: data
					}).then(res => {
						let data = {
							status: true,
							id: res.data.data.id
						}
						resolve(data)
					}).catch(err => {
						uni.hideLoading()
						let data = {
							status: false,
						}
						reject(data)
					})
				})
			},
			//点击已阅读
			chooseAgree() {
				this.refundModal.show = false
			}
		},
	}
</script>

<style lang="scss" scoped>
	.notice-show-popup {
		>image {
			width: 193rpx;
			height: 149rpx;
			margin-bottom: 40rpx;
		}

		.radio {
			position: relative;

			&::before {
				content: ' ';
				position: absolute;
				z-index: 2;
				top: 50%;
				left: 50%;
				transform: translateY(-50%) translateX(-50%);
				width: 65%;
				padding: 65% 0 0;
				background: black;
				border-radius: 50%;
			}

			&::after {
				content: ' ';
				position: absolute;
				z-index: 1;
				top: 50%;
				left: 50%;
				transform: translateY(-50%) translateX(-50%);
				width: 90%;
				padding: 90% 0 0;
				background: white;
				border-radius: 50%;
				border: 2rpx solid black;
			}
		}

		.notice-show-popup-botton {
			width: 100%;

			>view {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 148rpx;
				height: 44rpx;
				border-radius: 22rpx;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 1);

				&:nth-of-type(1) {
					background: rgba(218, 218, 218, 1);

				}

				&:nth-of-type(2) {
					background: linear-gradient(90deg, #EF4449 0%, #EF2B86 100%);
				}
			}
		}
	}

	.seat-show-popup {
		>image {
			width: 198rpx;
			height: 152rpx;
			margin-bottom: 35rpx;
		}

		.seat-show-popup-botton {
			>view {
				position: relative;
				padding: 17rpx 23rpx;
				padding-right: 85rpx;
				border-radius: 16rpx;
				color: rgba(255, 255, 255, 1);

				&:nth-of-type(1) {
					background: rgba(218, 218, 218, 1);
				}

				&:nth-of-type(2) {
					background: linear-gradient(90deg, #EF4449 0%, #EF2B86 100%);
				}

				image {
					width: 73rpx;
					height: 61rpx;
					position: absolute;
					bottom: 0;
					right: 0;
				}
			}
		}
	}

	.arr {
		color: #D9D9D9;
		margin-left: 10rpx;
	}

	.popup-model-box-tip {
		background: #000000;
		border-radius: 4rpx;
		padding: 20rpx 45rpx;
	}

	/deep/.u-mode-center-box {
		min-height: 0 !important;
		min-width: 0 !important;
	}

	.bai {
		color: #FFFFFF;
	}

	// 确认订单头部
	.payment {
		background-color: #F9F9F9;
		height: 100vh;
		overflow: auto;

		.buyTicketMode {
			width: 100%;
			color: #aaa;
			padding: 0 30rpx;
			font-size: 22rpx;

			>view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;

				&:nth-of-type(1) {
					padding-bottom: 0;
				}
			}

			.buyTicketMode-right {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
			}

			.buyTicket-title {
				color: rgba(51, 51, 51, 1);
				font-size: 26rpx !important;
			}
		}

		// 购票须知
		.buyticket {
			margin-top: 15rpx;
			background-color: #FFFFFF;
			padding: 0 30rpx;

			.title {
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx dashed #F2F2F2;

				.choiceBox {
					display: flex;
					justify-content: center;
					align-items: center;

					.line-red-new {
						color: #f1255d;
					}

					/deep/.u-checkbox {
						display: block !important;
						margin-right: 6rpx;

					}

					/deep/.u-checkbox__icon-wrap__icon {
						height: 34rpx;
						line-height: 34rpx;

						.u-icon {
							vertical-align: top;

							.u-icon__icon {
								line-height: 34rpx;
							}
						}
					}
				}
			}

			.popup-desc-box {
				>view {
					margin-top: 15rpx;
				}

				.desc-title {
					font-size: 26rpx;
					color: #AAAAAA;
				}

				.desc-content {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}
		}

		.confirmtop {
			width: 100%;
			padding: 30rpx 30rpx 30rpx 30rpx;
			background-image: linear-gradient(45deg, #f43f3b, #ec008c);
			color: #fff;
			display: flex;

			// 第一行
			.sendfont {
				display: flex;
				align-items: center;

				.icon-dianyingpiao1 {
					transform: rotate(135deg);
					margin-left: 20rpx;
					font-size: 28rpx;
				}

				.sedfont {
					font-size: 32rpx;
					box-sizing: border-box
				}

				.seatfont {
					font-size: 28rpx;
				}
			}

			// 第二行
			.sendfont2 {
				font-size: 28rpx;
				color: #fff;
				margin-top: 16rpx;

				text {
					margin-right: 8rpx;

					&:last-of-type {
						font-size: 18rpx;
						border: 1rpx solid #F78EB3;
						padding: 3rpx 8rpx;
						border-radius: 6rpx;
					}
				}
			}

			.timeborder {
				background-color: #fff;
				display: flex;
				color: #F3255D;
				padding: 5rpx 40rpx 5rpx 2rpx;
				border-radius: 30rpx;
				height: 60rpx;
				align-items: center;
				margin-right: -30rpx;

				.icon-shijian {
					color: #F1255D;
					font-size: 20px;
					height: 24px;
					line-height: 24px;
					margin: 2px;
				}

				.timefont {
					line-height: 48rpx;
					font-size: 24rpx;
					margin-left: 8rpx;
				}

			}
		}

		// 头部end
		// 影票信息开始
		.movieinfo {
			background-color: #fff;

			.youhui {
				padding: 0 30rpx;
				display: flex;
				min-height: 100rpx;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #F4F4F4;
				font-size: 30rpx;

				.input {
					width: 200rpx;
				}

				.quan {
					flex: 1
				}

				.margin {
					margin-left: 20rpx;
				}

				.zhangyong {
					color: #aaa;
				}

				.icon-cl-icon-right {
					color: #aaa;
					font-weight: bold;
					padding-top: 6rpx;
				}

				.youcolor {
					color: #F37B1D;
				}

				.shicolor {
					color: #f1255d;
				}
			}

			.jieshou {
				display: flex;
				min-height: 70rpx;
				padding: 0 30rpx;
				align-items: center;
				color: #aaa;
				font-size: 26rpx;
			}
		}

		// 影票信息结束
		// 提交底部开始
		.order_botm {
			width: 100%;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			padding: 0 30rpx;
			z-index: 999;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, .1);
			display: flex;
			justify-content: space-between;
			align-items: center;

			// .order_botm_top {
			// 	display: flex;
			// 	padding: 20rpx 0;
			// }

			.tijiaoorder {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 0;

				button {
					width: 375rpx;
					background-image: linear-gradient(45deg, #f43f3b, #ec008c);
					border-radius: 999rpx;
					color: #fff;
					font-size: 32rpx;
					height: 80rpx;

					&::after {
						border: 0;
					}
				}
			}

			.two-btn {
				width: 100vw;
				display: flex;
				justify-content: space-between !important;

				button {
					margin: 0;
					width: 300rpx;

					&:nth-of-type(1) {
						background-image: none;
						background-color: #F0F0F0;
						color: #000;
					}
				}
			}

			.buke {
				font-size: 24rpx;
				display: flex;
				align-items: center;

				.fen {
					color: #f1255d;
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.icon--arrow-bottom {
						color: #aaa;
						font-size: 25rpx;
						margin-left: 10rpx;
					}

					.icon--arrow-top {
						color: #aaa;
						font-size: 28rpx;
						margin-left: 10rpx;
					}
				}
			}

			// .icon--arrow-bottom {
			// 	color: #aaa;
			// 	font-size: 22rpx;
			// 	margin-left: 10rpx;
			// }
		}
	}

	/deep/.u-countdown-colon {
		color: #F1255D !important;
	}

	/deep/.u-switch--disabled {
		opacity: 1 !important;
	}

	.popup-model-box {
		.popup-title {
			padding: 20rpx 0;
			font-size: 36rpx;
			color: #333;
			text-align: center;
		}

		.popup-content {
			padding: 30rpx 40rpx;
			padding-bottom: 200rpx;
			color: #666;

			.popup-desc-box {
				>view {
					margin-top: 10rpx;
				}

				.desc-title {
					font-size: 26rpx;
					color: #AAAAAA;
				}

				.desc-content {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
			}

			.popup-bottom-switch {
				margin-top: 140rpx;
				font-size: 28rpx;
				display: flex;
				align-items: center;

				.switch {
					display: flex;
					align-items: center;

					/deep/.u-checkbox {
						display: block !important;
						margin-right: 20rpx;

					}

					/deep/.u-checkbox__icon-wrap__icon {
						height: 34rpx;
						line-height: 34rpx;

						.u-icon {
							vertical-align: top;

							.u-icon__icon {
								line-height: 34rpx;
							}
						}
					}
				}

				.line-red-new {
					color: #f1255d;
				}
			}
		}
	}

	.beixuan {
		margin: 0 !important;
		padding: 0 30rpx;
		border-top: 14rpx solid #F9F9F9;
	}

	.mode {
		border-top: 14rpx solid #F9F9F9
	}


	// 微信查价确认支付的覆盖层
	.cover {
		position: absolute;
		width: 100%;
		height: 100%;
		// background-color: black;
		z-index: 999;
	}

	.two {
		width: 50%;
		right: 0;
	}
</style>
